<template>
  <div id="rb-tabs">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane :tab="item.label" v-for="item in list" :disabled="item.disabled" :key="item.label">
        <RBSteps :stepList="processList" v-if="activeKey == item.label" :type="item.type" @reRender="reRender"
          :id="item.id">
        </RBSteps>
      </a-tab-pane>
    </a-tabs>
  </div>
  <FloatStep :step="stepMap.step" :status="stepMap.status" :list="stepList"></FloatStep>
</template>

<script setup lang='ts'>
import { ref, watch } from "vue"
import RBSteps from "./RBSteps.vue";
import FloatStep from "../FloatStep.vue";
import { comStores } from '@/store/common/comStore';
import { progressIndex } from "@/api/application-details/index.ts";
import { message } from "ant-design-vue";
const activeKey = ref<string>("首次应聘");
const store = comStores()
const list = ref<{ label: string; key?: string; component?: any, type: number; disabled?: boolean, id?: number }[]>([
  {
    label: '首次应聘',
    type: 0
  },
  {
    label: '在职情况',
    type: 1,
    disabled: true
  }
])

// const targetElement = ref<any>()
// onMounted(() => {
//   targetElement.value = document.querySelector(".right-top") as HTMLDivElement;
//   console.log(targetElement.value, ' targetElement.value')
//   const observer = new MutationObserver((mutationsList) => {
//     console.log(mutationsList, 'mutationsList')
//     for (const mutation of mutationsList) {
//       if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
//         // 获取元素的当前高度
//         const newHeight = targetElement.value.clientHeight;
//         // console.log('Element height changed to:', newHeight);
//         let el = document.querySelector(".rb-steps") as HTMLDivElement;
//         el.style.height = `calc( 85vh - ${newHeight + 120}px )`
//       }
//     }
//   });
//   observer.observe(targetElement.value, { attributes: true, childList: true, subtree: true });
// })
const stepMap = ref<any>({})
const interviewStepList = [
  { label: "简历环节", href: "#rb-label-简历筛选" },
  { label: "面试环节", href: "#rb-label-到面" },
  { label: "培训环节", href: "#rb-label-到培" },
  { label: "签约环节", href: "#rb-label-待录取" },
]
const onJobList = [
  { label: "入职", href: "#rb-label-入职" },
  { label: "实习", href: "#rb-label-实习" },
  { label: "试用", href: "#rb-label-试用" },
  { label: "转正", href: "#rb-label-转正" },
]
const stepList = ref<{ label: string, href?: string }[]>(interviewStepList);

const processList = ref([])
const getData = async (id = null) => {
  const { resumeIds, resumeId } = store.currentResume;
  if (resumeIds?.length == 0) {
    return
  };
  let cur = list.value.find(el => el.label === activeKey.value);
  if(!id &&!resumeId) return;
  if(!cur) return
  const data = await progressIndex({ resumeId: id ? id : resumeId, type: cur?.type });
  if (data && data.code == '10000') {
    processList.value = data.data.processList;
    if (data.data.processList?.length == 0) {
      return
    }
    let { processResult,process } = processList?.value[processList?.value.length - 1];
    let map = {
      "通过": "1",
      "淘汰": '2',
      "放弃": "3",
      "进行中": "4",
      '未达到': "5"
    }
    stepMap.value.status = map[processResult];
    const { nowSort } = data.data;
    if (nowSort > 4) {
      list.value[list.value.length - 1].disabled = false;
    } else {
      list.value[list.value.length - 1].disabled = true;
    }
    if (activeKey.value !== "在职情况") {
      stepMap.value.step = nowSort > 4 ? 4 : nowSort
    } else {
      stepMap.value.step = nowSort - 4;
    }
    smoothScroll("rb-label-"+process)
    return nowSort
  } else {
    processList.value = []
    // message.error("获取进度失败");
    stepMap.value.step = 1;
    stepMap.value.status = 5;
  }
};

watch(() => activeKey.value, (val) => {
  let cur = list.value.find(el => el.label === val) as any;
  if (val === "在职情况") {
    stepList.value = onJobList
    getData()
  } else {
    stepList.value = interviewStepList;
  }
  if(cur){
   getData(cur.id)
  }
});

const smoothScroll = (className: string) => {
  let anchor = document.querySelectorAll(`#${className}`) ;
  if(anchor.length==0) return;
  anchor[anchor.length-1].scrollIntoView({
    behavior: 'smooth',
    block: 'start',
  });
};

const reRender = () => {
  let cur = list.value.find(el => el.label === activeKey.value) as any;
  getData(cur.id)
}




const getPageData = async (val) => {
  const sort: number = await getData();
  let arr: any = [];
  val.resumeIds?.forEach((el, idx) => {
    arr.push({
      label: idx == 0 ? '首次应聘' : idx + 1 + "次应聘",
      type: 0,
      id: el,
      active: val.resumeId === el
    })
  })
  arr.push({
    label: '在职情况',
    type: 1,
    id: val.resumeId,
    disabled: true
  })
  list.value = arr;
  if (sort > 4) {
    activeKey.value = "在职情况";
    getData()
  } else {
    let cur = arr.find(el => el.active)
    activeKey.value = cur?.label
  }
  getData()
}

watch(() => store.currentResume, async (val) => {
  await getPageData(val)
}, { immediate: true, deep: true })


</script>

<style lang="less" scoped>
:deep(.ant-tabs-tab-btn){
  font-size: 16px;
}
</style>